<template>
    <div class="mylogin">
        <div class="login-header">
        </div>
        <div class="login-content">
            <div class="mid-left">
                <img src="http://hmwx.wdexam.com/Public/Home/img/agentIndex/logo2.png" alt="">
            </div>
            <div class="mid-right">
                <div class="mid-title">
                    <span class="signin">
                        用户登录
                    </span>
                    <span class="register">
                        没有账户,
                        <span class="register-btn">注册</span>
                    </span>
                </div>
                <div class="login-form">
                    <input type="text" placeholder="请输入手机号">
                    <input type="passsword" placeholder="密码 （6-20字母和数字）">
                    <div class="qrcode">
                        <input type="text" placeholder="验证码 ">
                    </div>
                    <div class="forget-password">
                        <span>忘记密码</span>
                    </div>
                    <div class="submit-btn" @click="login">
                        登录
                    </div>
                </div>
            </div>
        </div>
        <div class="login-footer">

        </div>
    </div>
</template>
<script>
export default {
    name:'login',
    methods:{
        login(){
            this.$post("/login",{
                "username": "15194942210",
                "password": "456789",
                "loginType": "0"
            }).then(res=>{
                if(res.headers.authorization){
                    console.log(res.headers.authorization)
                    localStorage.setItem('token',res.headers.authorization)
                    debugger
                    this.$router.push('/studyCenter')
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.mylogin{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    .login-header{
        height: 80px;
        width: 100%;
    }
    .login-footer{
        height: 185px;
    }
    .login-content{
        flex-grow: 1;
        background: #f29351;
    
        padding: 0 40px;
        display:flex;
        align-items: center;
        justify-content: space-between;
        .mid-left{
            img{
                width: 600px;
                margin-left:10%;
            }
        }
        .mid-right{
            width: 390px;
            height:430px;
            background: white;
            padding: 35px;
            .mid-title{
                display:flex;
                justify-content: space-between;
                .signin{
                    font-size:20px;
                    font-weight: 600
                }
                .register{
                    font-size:12px;
                    padding-top:10px;
                    .register-btn{
                        color: rgb(0, 153, 255);
                        cursor:pointer;
                    }
                }
            }
            .login-form{
                margin-top:26px;
                input{
                    width: 100%;
                    height: 38px;
                    margin-top: 20px;
                    line-height: 38px;
                    border: 1px solid #e6e6e6;
                    background-color: #fff;
                    border-radius: 2px;
                    padding-left:12px;
                }
                input::placeholder{
                    font-size:14px;
                }
                input:focus{
                    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(59,180,242,.3);
                }
                .qrcode{
                    input{
                        width: 144px;
                    }
                }
                .submit-btn{
                    width: 100%;
                    background-color: #FF6500;
                    height: 38px;
                    color: white;
                    text-align: center;
                    font-size:14px;
                    line-height: 38px;
                    cursor: pointer;
                    margin-top:20px;
                }
            }
            .forget-password{
                font-size:14px;
                padding-top:30px;
                cursor: pointer;
            }
        }
        
    }
}
</style>

